{% extends "base.html" %}

{% block content %}

<h1 class="title">图片搜索</h1>
{% if not missing_index %}
{% if model_up %}
<section class="section">
    <div class="box has-background-warning-light">
        <p>
            <b>请尝试以下示例之一:</b>
            <ul>
                <li>一直黄色的小狗</li>
                <li>A yellow puppy</li>
            </ul>
        </p>
    </div>
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
        <div class="field">
            {{ form.searchbox.label(class_="label") }}
            {{ form.searchbox(size=32, class_="input is-info") }}
        </div>
        </p>
        <p>{{ form.submit(class_="button is-info") }}</p>
    </form>
</section>

{% if search_results %}

<section>
    {% if image_id_to_search_for %}
        <br />
        <div>查找相似的图像 {{image_id_to_search_for}}
        </div>
    {% endif %}

    <div class="container">
        搜索关键字: {{ query }}
        <hr>
        <table class="table is-striped is-fullwidth">
            <thead>
            <tr>
                <th><abbr title="Image ID">Image id</abbr></th>
                <th><abbr title="Image name">Image name</abbr></th>
                <th><abbr title="Score">Score</abbr></th>
                <th><abbr title="Photo">Photo</abbr></th>
            </tr>
            </thead>
            {% for document in search_results %}

            <tr>
                <td>
                    {{ document.fields.image_id[0] }}
                </td>
                <td>
                    {{ document.fields.image_name[0] }}
                </td>
                <td>
                    {{ document._score }}
                </td>
                <td>
                    <img src="{{ document.fields.relative_path[0] }}" alt="" width="200">
                    <button name="find_similar_image" value="{{ document.fields.image_id[0] }}" id="add-update" type="submit" class="button is-info">查找像似图片</button>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</section>

{% endif %}

{% else %}
<div class="box has-background-danger-light">
    <p>
        <strong>  NLP 模型 ({{ model_name }}) 在此任务所需的在 ES 集群中不可用。</br>请确保模型已启动并正在运行.</strong>
    </p>
</div>

{% endif %}

{% else %}
<div class="box has-background-danger-light">
    <p>
        <strong> Index ({{ index_name }}) 在此任务所需的在 ES 集群中不可用。</br>请确保索引可用.</strong>
    </p>
</div>
{% endif %}
</form>
{% endblock %}